button#allButton {
position: relative;
min-width: 160px;
background: transparent;
border: none;
border-radius: 50px;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: 10px 20px;
cursor: pointer;
}
button#allButton span {
color: #FFFFFF;
mix-blend-mode: difference;
}
button#allButton:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 52px;
height: 100%;
border-radius: 50px;
background: black;
transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
button#allButton:hover:before {
background: black;
width: 100%;
}
button#allButton
:這是CSS選擇器,用於選中具有ID為"allButton"的<button>
元素。
position: relative;
:設置按鈕的定位為相對定位,這意味著按鈕的位置參考自身的位置。
min-width: 160px;
:設置按鈕的最小寬度為160像素。
background: transparent;
:將按鈕的背景設置為透明。
border: none;
:移除按鈕的邊框。
border-radius: 50px;
:設置按鈕的邊框半徑為50像素,使按鈕呈現圓形外觀。
font-size: 1rem;
:設置按鈕的字體大小為1rem。
font-weight: bold;
:設置按鈕的字體加粗。
text-align: center;
:將按鈕內容居中對齊。
text-decoration: none;
:移除文本的下劃線。
text-transform: uppercase;
:將文本轉換為大寫。
padding: 10px 20px;
:設置按鈕的內邊距,分別為10像素的上下內邊距和20像素的左右內邊距。
cursor: pointer;
:將滑鼠游標設置為手型,以指示按鈕可以被點擊。
button#allButton span
:這是對按鈕內的<span>
元素進行樣式設置的CSS選擇器。
color: #FFFFFF;
:設置<span>
元素的文字顏色為白色。
mix-blend-mode: difference;
:使用不同的混合模式來處理元素的內容和背景之間的混合效果。
button#allButton:before
:這是使用伪元素 ::before
選擇器為按鈕添加一個伪元素,用於實現按鈕的背景動畫效果。
content: '';
:設置伪元素的內容為空,這是必需的。
position: absolute;
:將伪元素的定位設置為絕對定位,使其相對於父元素按鈕進行定位。
top: 0;
和 left: 0;
:將伪元素的位置設置在按鈕的左上角。
width: 52px;
和 height: 100%;
:設置伪元素的寬度為52像素,高度為100%(與按鈕相同的高度)。
border-radius: 50px;
:設置伪元素的邊框半徑為50像素,使其呈現圓形。
background: black;
:設置伪元素的背景顏色為黑色。
transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
:設置伪元素的過渡效果,使其在0.85秒內變化,使用自定義的貝塞爾曲線函數。
button#allButton:hover:before
:這是當滑鼠懸停在按鈕上時應用的CSS規則,用於修改伪元素的背景以實現動畫效果。
background: black;
:當滑鼠懸停在按鈕上時,將伪元素的背景設置為黑色。
width: 100%;
:將伪元素的寬度設置為100%,使其從左邊擴展到整個按鈕的寬度,從而創建一個動畫效果。
製作成果如下:
觸發前:
觸發後: